<%--
  Created by IntelliJ IDEA.
  User: qiliping
  Date: 16/7/2
  Time: 下午7:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/assets/webuploader-0.1.5/webuploader.css">

    <!--引入JS-->
    <script type="text/javascript" src="/assets/webuploader-0.1.5/webuploader.js"></script>
    <script>
        $(function(){
            var $ = jQuery, $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
                    ratio = window.devicePixelRatio || 1,

            // 缩略图大小
                    thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio,

            // Web Uploader实例
                    uploader,
                    $imgurls = $("#imgurls");


            // 初始化Web Uploader
            uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: true,

                // swf文件路径
                swf: '/assets/webuploader-0.1.5/Uploader.swf',

                // 文件接收服务端。
                server: '/file_upload?dir=image',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });

            // 当有文件被添加进队列的时候
            /*uploader.on( 'fileQueued', function( file ) {
                $list.append( '<div id="' + file.id + '" class="item">' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">等待上传...</p>' +
                        '</div>' );
            });*/
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                        + '<img width="120px" />'
                        + '</div>'), $img = $li.find('img');
//                var $li = $('')

                $list.append($li);

                // 创建缩略图
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });



            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                            '</div>' +
                            '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css( 'width', percentage * 100 + '%' );
            });


            uploader.on( 'uploadSuccess', function( file ) {
                $( '#'+file.id ).find('p.state').text('已上传');
            });

            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            uploader.on('uploadAccept', function (file, response) {


//            console.log($('#' + file.id).html());
//            console.log($.toJSON(response));
                if (response.error == 1) {
                    // 通过return false来告诉组件，此文件上传有错。
                    return false;
                } else {
//                    var img_url = response.url;
//                    alert(img_url);
                    $imgurls.append('<input type="hidden" name="imgs" value="'+response.url+'">');
                }
            });


        })
    </script>
</head>
<body>
<div class="navigation">
    <div class="crumbs ">
        <i class="tm-iconfont icon-info"></i>
        <a href="#">卖家中心</a><span>&gt;</span><a href="#200">商品管理</a><span>&gt;</span>发布商品
    </div>
    <div class="help">
        <a href="#" target="_blank">卖家交易学习专区</a>
    </div>
</div>
<div class="goods_release line-all">
    <div class="gc_tip p-lr20 h40 line-bottom">
        类目信息：<a>服装</a> > <a>男装</a> > <a>牛仔裤</a>
    </div>
    <div class="re_content p-tb20">
        <div class="u_tableform p-lr20">
            <div class="item">
                <label class="label">商品标题：<span>*</span></label>
                <div class="cont_txt">
                    <input type="text" class="text" style="width:400px;" />
                </div>
                <span class="tip">请输入商品标题，50字以内</span>
            </div>
            <div class="item">
                <label class="label">店铺分类：</label>
                <div class="cont_txt">
                    <select class="text w172">
                        <option value="请选择店铺分类">请选择店铺分类</option>
                        <option value="iphone配件">iphone配件</option>
                    </select>
                </div>
            </div>
            <div class="item">
                <label class="label">商品图片：<span>*</span></label>
                <div class="cont_txt">
                    <p class="c-FF0000">提示：最多允许6张产品图片，产品图片规格为1:1 建议图片像素800*800 文件大小500K以内。第一张图为主图</p>
                        <div id="imgurls"></div>
                    <div id="uploader-demo" class="p-tb10 line-all oh b-F4F4F4">

                        <!--dom结构部分-->

                            <!--用来存放item-->
                            <ul id="fileList" class="uploader-list upload_A"></ul>
                            <div id="filePicker">选择图片</div>



                    <%--<ul class="upload_A">
                            <li>
                                <input id="myfile" type="file" style="display:none"/>
                                <a href="javascript:document.getElementById('myfile').click()"></a>
                                <div class="list">
                                    <div class="ith_img2 usernane_img120"><span></span></div>
                                </div>
                            </li>
                            <li>
                                <input id="myfile2" type="file" style="display:none"/>
                                <a href="javascript:document.getElementById('myfile2').click()"></a>
                                <div class="list">
                                    <div class="ith_img2 usernane_img120"><span></span></div>
                                </div>
                            </li>
                            <li>
                                <input id="myfile3" type="file" style="display:none"/>
                                <a href="javascript:document.getElementById('myfile3').click()"></a>
                                <div class="list">
                                    <div class="ith_img2 usernane_img120"><span></span></div>
                                </div>
                            </li>
                            <li>
                                <input id="myfile4" type="file" style="display:none"/>
                                <a href="javascript:document.getElementById('myfile4').click()"></a>
                                <div class="list">
                                    <div class="ith_img2 usernane_img120"><span></span></div>
                                </div>
                            </li>
                            <li>
                                <input id="myfile5" type="file" style="display:none"/>
                                <a href="javascript:document.getElementById('myfile5').click()"></a>
                                <div class="list">
                                    <div class="ith_img2 usernane_img120"><span></span></div>
                                </div>
                            </li>
                            <li>
                                <input id="myfile6" type="file" style="display:none"/>
                                <a href="javascript:document.getElementById('myfile6').click()"></a>
                                <div class="list">
                                    <div class="ith_img2 usernane_img120"><span></span></div>
                                </div>
                            </li>
                        </ul>--%>
                    </div>
                </div>
            </div>
            <div class="item">
                <label class="label">商品规格：</label>
                <div class="cont_txt">
                    <form id="form1" name="form1" method="post" action="">
                        <label class="p-r20"><input type="radio" name="RadioGroup1" value="统一规格" id="Guige_all" onclick="all_guge()" />统一规格</label>
                        <label><input type="radio" name="RadioGroup1" value="多规格" id="Guige_more" onclick="many_guige()"/>多规格</label>
                    </form>
                    <!--star 多规格弹出-->
                    <div class="many_format line-all b-FAFAFA p10">
                        <div class="item line-bottom">
                            <label class="label">颜色：</label>
                            <div class="cont_txt">
                                <input type="text" class="text w150 m-r10" placeholder="请填写颜色" />
                                <button class="i_btn2 u2">添加</button>
                                <div class="i_class">
                                    <span title="关闭">黑色<i>&times;</i></span>
                                    <span title="关闭">白色<i>&times;</i></span>
                                </div>
                            </div>
                        </div>
                        <div class="item line-bottom">
                            <label class="label">颜色：</label>
                            <div class="cont_txt">
                                <input type="text" class="text w150 m-r10" placeholder="请填写颜色" />
                                <button class="i_btn2 u2">添加</button>
                                <div class="i_class">
                                    <span title="关闭">黑色<i>&times;</i></span>
                                    <span title="关闭">白色<i>&times;</i></span>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            商品销售规格：图片选传，单张图片大小不超过30kb。<span class="c-FF0000">技巧：没有商品可以将库存设为0。</span>
                        </div>
                        <div class="item">
                            <label class="label" style="width:80px;">批量填充：</label>
                            <div class="cont_txt">
                                <input type="text" class="text w120 m-r10" placeholder="微店价" />
                                <input type="text" class="text w120 m-r10" placeholder="原件（选填）" />
                                <input type="text" class="text w120 m-r10" placeholder="库存"  />
                                <input type="text" class="text w120 m-r10" placeholder="商品条码（选填）"  />
                                <button class="i_btn2 u2">确定</button>
                            </div>
                        </div>
                        <div class="item u_table_list line-all m-t10 table001">
                            <table class="">
                                <colgroup>
                                    <col width="40%">
                                    <col width="10%">
                                    <col width="10%">
                                    <col width="10%">
                                    <col width="10%">
                                    <col width="20%">
                                </colgroup>
                                <tr>
                                    <th>颜色</th>
                                    <th>尺码</th>
                                    <th>微店价</th>
                                    <th>原价(选填)</th>
                                    <th>库存</th>
                                    <th>商品条码(选填)</th>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="l w50">黑色</div><button class="i_btn2 u2 r m-t10">添加图片</button>
                                    </td>
                                    <td>
                                        <div>XL</div>
                                        <div>L</div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w70" /></div>
                                        <div><input type="text" class="text w70" /></div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w70" /></div>
                                        <div><input type="text" class="text w70" /></div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w70" /></div>
                                        <div><input type="text" class="text w70" /></div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w120" /></div>
                                        <div><input type="text" class="text w120" /></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="l w50">白色</div>
                                        <div class="r"><img style="width:35px; height:35px; margin-right:10px;" src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/TB1BUybHFXXXXakXpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg"><a class="c-3399ff" href="javascriipt:;">删除图片</a></div>
                                    </td>
                                    <td>
                                        <div>XL</div>
                                        <div>L</div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w70" /></div>
                                        <div><input type="text" class="text w70" /></div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w70" /></div>
                                        <div><input type="text" class="text w70" /></div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w70" /></div>
                                        <div><input type="text" class="text w70" /></div>
                                    </td>
                                    <td>
                                        <div><input type="text" class="text w120" /></div>
                                        <div><input type="text" class="text w120" /></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!--end 多规格弹出-->
                    <script type="text/javascript">
                        function all_guge(){
                            $(".many_format").hide();
                        }
                        function many_guige(){
                            $(".many_format").show();
                        }
                    </script>
                </div>
            </div>
            <div class="item">
                <label class="label">微店价：<span>*</span></label>
                <div class="cont_txt">
                    <input type="text" class="text w150" /><span class="p-l10">元</span>
                </div>
                <span class="tip" style="border:1px solid #FF0000; color:#333; padding:2px 5px;">请输入商品标题，50字以内</span>
            </div>
            <div class="item">
                <label class="label">原件<em class="c-999999">(必填)</em>：</label>
                <div class="cont_txt">
                    <input type="text" class="text w150" /><span class="p-l10">元</span>
                </div>
            </div>
            <div class="item">
                <label class="label">商品库存：<span>*</span></label>
                <div class="cont_txt">
                    <input type="text" class="text w150" /><span class="p-l10">元</span>
                </div>
            </div>
            <div class="item">
                <label class="label">商品条码：</label>
                <div class="cont_txt">
                    <input type="text" class="text w150" />
                </div>
                <span class="tip">（必填）</span>
            </div>
            <div class="item">
                <label class="label">商品详情：<span>*</span></label>
                <div class="cont_txt">
                    <textarea class="textarea m-t10" style="width:600px;"></textarea>
                </div>
            </div>
            <div class="item line-bottom m-b10">
                <label class="label">物流信息</label>
            </div>
            <div class="item">
                <label class="label tar">发货地：<span>*</span></label>
                <div class="cont_txt">
                    <select class="text w172 m-r10">
                        <option value="请选择发货省份">请选择发货省份</option>
                        <option value="广东">广东</option>
                    </select>
                    <select class="text w172">
                        <option value="请选择发货城市">请选择发货城市</option>
                        <option value="深圳">深圳</option>
                        <option value="广州">广州</option>
                    </select>
                </div>
            </div>
            <div class="item">
                <label class="label tar">运费：<span>*</span></label>
                <div class="cont_txt">
                    <input type="text" class="text w150" value="0" /><span class="p-l10">元</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tac p-t40">
    <button class="i_btn u2 p-lr50">发布商品</button>
    <div style="padding-bottom:100px; height:10px;"></div>
</div>
</body>
</html>
